<template>
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 搜索 -->
			<w-tit leftIcon="arrowleft" color="#595757" background="#fff" fontweight="600" @confirm="rightSearch"
				rightIconNum="two" is_searchs="true">
			</w-tit>
		</view>
		<view class="page-body">
			<scroll-view class="body-top" scroll-y v-if="sel_list.length>0" :style="{height:sel_list.length>5?'400rpx':'220rpx'}">
				<!--筛选框-->
				<view  class="top-box-ul" >
					<block v-for="(ite,ind) in sel_list" :key="ind">
						<view v-if="ite.checked" class="top-box-li" @click="changecheck(ite.uid,ite.checked)">
							<image class="li-img" :src="ite.image" mode="aspectFill"></image>
							<view class="li-txt">{{ ite.name }}</view>
							<image class="li-icon" :src="$mAssetsPath.icon_sc3"></image>
						</view>
					</block>
				</view>
			</scroll-view>
			<view class="body-box">
				<!--左侧导航-->
				<scroll-view class="left-side" scroll-y>
					<view class="item center" :class="{active: tabIndex === index}" v-for="(item,index) in datalist"
						:key="index" @click="changeCate(index)">
						<view>{{ item.name }}</view>
					</view>
				</scroll-view>
				<!--右侧列表-->
				<scroll-view class="right-side" scroll-y>
					<view class="right-side-title">{{datalist[tabIndex].name}}</view>
					<view class="item" v-for="(ite,ind) in datalist[tabIndex].child" :key="ind">
						<view class="item-li" @click.stop="changecheck(ite.uid,ite.checked)">
							<view class="item-li-l">
								<image class="li-img" :src="ite.image" mode="aspectFill"></image>
								<view class="li-txt">{{ ite.name }}<text class="li-tag"
										v-if="ite.tag!==''">{{ite.tag}}</text></view>
							</view>
							<view class="item-li-r">
								<image class="icon-check"
									:src="ite.checked?$mAssetsPath.icon_check_on:$mAssetsPath.icon_check"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="page-foot">确认</view>
	</view>
</template>

<script>
	import wTit from '@/components/w-tit/w-tit-back-serch-add.vue'; //标题
	import chatList from '@/components/w-chat/chat-list.vue'; //聊天组件
	import loadMore from '@/components/uni-load-more/load-more.vue';
	export default {
		components: {
			wTit,
			chatList,
			loadMore
		},
		onShow() {

		},
		onLoad(option) {
			console.log(222, option)
			this.getData();
		},
		data() {
			return {
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				datalist: [{
					id: 1,
					name: '公司成员',
					child: [{
						uid: 1,
						name: '阿萨德',
						image: '/static/img/im/face/face_4.jpg',
						tag: '经理'
					}, {
						uid: 2,
						name: '阿萨德',
						image: '/static/img/im/face/face_5.jpg',
						tag: '主管'
					}, {
						uid: 3,
						name: '阿萨德',
						image: '/static/img/im/face/face_6.jpg',
						tag: '副经理'
					}, {
						uid: 4,
						name: '阿萨德',
						image: '/static/img/im/face/face_6.jpg',
						tag: ''
					}]
				}, {
					id: 2,
					name: '市场部',
					child: [{
						uid: 5,
						name: '阿萨德',
						image: '/static/img/im/face/face_7.jpg',
						tag: '审核员'
					}, {
						uid: 6,
						name: '阿萨德',
						image: '/static/img/im/face/face_8.jpg',
						tag: ''
					}, {
						uid: 7,
						name: '阿萨德',
						image: '/static/img/im/face/face_9.jpg',
						tag: ''
					}]
				}, {
					id: 3,
					name: '设计部',
					child: [{
						uid: 8,
						name: '阿萨德',
						image: '/static/img/im/face/face_3.jpg',
						tag: ''
					}, {
						uid: 9,
						name: '阿萨德',
						image: '/static/img/im/face/face_3.jpg',
						tag: ''
					}, {
						uid: 14,
						name: '阿萨德',
						image: '/static/img/im/face/face_3.jpg',
						tag: ''
					}]
				}, {
					id: 4,
					name: '产品部',
					child: [{
						uid: 10,
						name: '阿萨德',
						image: '/static/img/im/face/face_1.jpg',
						tag: '经理'
					}, {
						uid: 11,
						name: '阿萨德',
						image: '/static/img/im/face/face_2.jpg',
						tag: ''
					}, {
						uid: 12,
						name: '阿萨德',
						image: '/static/img/im/face/face_3.jpg',
						tag: ''
					}]
				}],
				sel_list:[],
				sel_show:false,
				tabIndex: 0,
				user_statu: {
					add_statu: false,
					replace_statu: false,
					stick_del_statu: false
				},
			}
		},
		methods: {
			getData() {
				if (this.datalist && this.datalist.length > 0) {
					this.datalist.forEach(item => {
						item.child.forEach(ite => {
							this.$set(ite, 'checked', false)
						})
					})
				}
			},
			changecheck(uid, checked) {
				console.log(1, uid, checked)
				console.log(2, this.datalist)
				if (this.datalist && this.datalist.length > 0) {
					this.datalist.forEach((item, i) => {
						item.child.forEach((ite, ii) => {
							if (uid === ite.uid) {
								ite.checked = !checked
							}
						})
					})
				}
				let sel_list = []
				if (this.datalist && this.datalist.length > 0) {
					this.datalist.forEach((item, i) => {
						item.child.forEach((ite, ii) => {
							if(ite.checked === true){
								this.sel_show = true
								sel_list.push(ite)
							}
						})
					})
					this.sel_list = sel_list;
				}
				console.log(3,this.sel_list)
			},
			changeCate(tabIndex) {
				this.tabIndex = tabIndex;
			},
			//跳转聊天界面
			tomsg(id, name, type) {
				uni.navigateTo({
					url: `/pages/message/messageInfo?id=${id}&name=${name}&type=${type}`
				})
			},
			rightSearch() {
				console.log(33)
			}
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: $uni-bg-color-grey;
		.page-foot{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height:100rpx;
			width: 100%;
			text-align: center;
			background: $uni-but-bg-color;
			line-height: 100rpx;
			color: $font-color-w;
		}

		.page-body {
			display: flex;
			flex-direction: column;
			height: calc(100% - 190rpx);

			.body-top {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				background: $uni-bg-color;
				border-bottom: 1rpx solid #eee;
				overflow: hidden;
				height: 360rpx;

				.top-box-ul {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					padding:0 30rpx;
				
					.top-box-li {
						display: flex;
						position: relative;
						flex-direction: column;
						width: 116rpx;
						margin: 0 20rpx 10rpx 0;
				
						.li-icon {
							width: 36rpx;
							height: 36rpx;
							position: absolute;
							right: 0;
							top: 0;
						}
				
						.li-img {
							width: 80rpx;
							height: 80rpx;
							margin-top: 30rpx;
							margin-bottom: 4rpx;
							border-radius: 10rpx;
						}
				
						.li-txt {
							font-size: 24rpx;
							font-weight: 400;
							color: $font-color-3;
						}
					}
					.top-box-li:nth-of-type(5n){
						margin: 0 0 10rpx 0;
					}
				}
			}

			.body-box {
				display: flex;
				height: 100%;

				.left-side {
					flex-shrink: 0;
					width: 250rpx;
					height: 100%;
					overflow-y: hidden;
					background-color: #eee;

					.item {
						width: 100%;
						text-align: center;
						line-height: 100rpx;
						height: 100rpx;
						font-size: 32rpx;
						color: $font-color-3;
					}

					.active {
						font-size: 32rpx;
						color: $font-color-b3;
						font-weight: 700;
						background-color: #fff;
						position: relative;

						&::before {
							content: '';
							position: absolute;
							left: 0;
							width: 6rpx;
							height: 100rpx;
							background-color: $uni-but-bg-color;
							border-radius: 0 4rpx 4rpx 0;
						}
					}
				}

				.right-side {
					flex: 1;
					height: 100%;

					.right-side-title {
						font-size: 28rpx;
						color: $font-color-3;
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 30rpx;
					}

					.item {
						display: flex;
						flex-direction: column;
						flex-shrink: 0;

						.item-li {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 120rpx;
							border-bottom: 1rpx solid #F2F4F5;
							background: #fff;
							padding: 0 30rpx;

							.item-li-l {
								display: flex;
								align-items: center;

								.li-img {
									width: 80rpx;
									height: 80rpx;
									margin-right: 24rpx;
									border-radius: 10rpx;
								}

								.li-txt {
									font-size: 32rpx;
									color: $font-color-3;

									.li-tag {
										margin-left: 20rpx;
										height: 28rpx;
										border: 1rpx solid $border-color-blue;
										border-radius: 4rpx;
										padding: 0 10rpx;
										font-size: 20rpx;
										font-weight: 400;
										line-height: 28rpx;
										color: $font-color-b3;
									}
								}
							}

							.item-li-r {
								.icon-check {
									width: 36rpx;
									height: 36rpx
								}
							}
						}

					}

					.icon {
						width: 108rpx;
						height: 108rpx;
						margin-bottom: 16rpx;
					}

					.tit {
						width: 140rpx;
						font-size: 24rpx;
						color: #333;
						text-align: center;
						line-height: 1.4;
					}
				}
			}

		}

		.page-top {
			display: flex;
			flex-direction: column;
		}
	}
</style>
